<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id='app'>
        <form class="am-form2">
            <el-switch v-model="showKeywords" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
            <hr>
            <div v-if='showKeywords'>
                <el-button v-for='item in allWords' @click='onClickWord(item)' size='small'>{{item}}</el-button>
                <div v-loading='loadingBaidu'>
                    <el-input placeholder="查询百2度排名" v-model="word" clearable>
                        <el-button slot="append" icon="el-icon-search" @click='getBaidu'></el-button>
                    </el-input>
                    <p v-if='haveResult'>排名{{page}} <a :href="requestUrl" target="_blank">查看</a></p>
                    <p v-if='!haveResult'>没有排名信息</p>
                </div>
                <hr>
                <el-row :gutter="20">
                    <el-col :span="24" v-for='item in queryResults'>
                        <span>{{item.key}} </span>
                        <span v-if='item.rank =="10+"' style="color: blue">{{item.rank}}</span>
                        <span v-else-if='item.rank =="1"' style="color: red">{{item.rank}}</span>
                        <span v-else-if='item.rank =="2"' style="color: red">{{item.rank}}</span>
                        <span v-else-if='item.rank =="3"' style="color: red">{{item.rank}}</span>
                        <span v-else>{{item.rank}}</span>
                        <br>
                    </el-col>
                </el-row>
                <hr>
            </div>
            <el-input placeholder="请输入内容" v-model="queryId" type='number' style='width: 200px'>
                <el-button slot="append" icon="el-icon-search" @click='query'></el-button>
            </el-input>
            <hr>
            <a href="/yitai/info?id=${previousArticle.id}">上一篇(${previousArticle.title}) ${previousArticle.id}</a> -
            <a href="/yitai/info?id=${nextArticle.id}">下一篇(${nextArticle.title}) ${nextArticle.id}</a> <a href="http://www.etcr.com.cn/product/info?id=${info.id}" target="_blank">${info.title}</a>
            <hr>
            <el-form ref="form" :model="form" label-width="80px" @keyup.alt.83.native='onSubmit'>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="id">
                            <el-input v-model="form.id" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="form.title" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="更新时间">
                            <el-input v-model="form.updateTime" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="seo标题">
                            <el-input v-model="form.seoTitle" type="textarea" :rows="2">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="seo描述">
                            <el-input v-model="form.seoDescription" type="textarea" :rows="6">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="内容">
                            <el-switch v-model="showContent" active-color="#13ce66" inactive-color="#ff4949">
                            </el-switch>
                            <el-button @click='clearBlank'>去除空格</el-button>
                            <div v-if='showContent' style="border: solid;border-color: red">${info.content!""}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="seo关键字">
                            <el-input v-model="form.seoKeywords" type="textarea" :rows="6">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="推荐关键字">
                            <el-input v-model="words" type="textarea" :rows="6">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="修改html">
                            <el-switch v-model="modifyHtml" active-color="#13ce66" inactive-color="#ff4949">
                        </el-form-item>
                    </el-col>
                    </el-switch>
                    <el-col :span="24" v-if='modifyHtml'>
                        <el-form-item label="html原文">
                            <el-input v-model="form.descriptionRaw" type="textarea" :rows="15">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if='modifyHtml'>
                        <el-form-item label="html">
                            <el-input v-model="form.description" type="textarea" :rows="15">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-button type="primary" @click='onSubmit'>保存</el-button>
            <el-button type="primary" @click='onCheck' v-if='form.categoryId!=3'>查看</el-button>
            <el-button type="primary" @click='onCheckNews' v-if='form.categoryId==3'>查看新闻</el-button>
            <el-button type="primary" @click='checkAll'>查看排名</el-button>
            <!-- <a href=""></a> -->
            <div style="margin-top: 15px;">
                <!-- <el-input placeholder="请输入内容2" v-model="form.seoKeywords">
                    <el-button slot="append" @click='onsplit'>分词</el-button>
                </el-input>
                <el-input placeholder="分词结果" v-model="words">
                </el-input> -->
            </div>
            <!-- Create the editor container -->
            <!-- <div id="toolbar">
                <button class="ql-bold">Bold</button>
                <button class="ql-italic">Italic</button>
            </div>
            <div id="editor">
                <p v-html='form.description'>Hello World!</p>
            </div>
            <hr /> -->
            <textarea class="editor_cjw" name="pxlmCourse.agreement" cols="100" rows="8" v-model='form.description'></textarea>
            <div v-if='modifyHtml'>
                <p style="border-color: red;border-width: 1px;border-style: solid;"><span v-html="form.description"></span></p>
            </div>
        </form>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.min.js"></script>
    <link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.snow.min.css" rel="stylesheet">
    <link href="http://app.cenjiawen.com/kindeditor/themes/default/default.css" rel="stylesheet">
    <script src="http://app.cenjiawen.com/kindeditor/kindeditor-all-min.js"></script>
    <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
    <script src="/components/utils.js"></script>
    <script type="text/javascript">
    KindEditor.ready(function(K) {
        //window.editor = K.create('#editor_id');

        window.editor = K.create('#editor_id', {
            uploadJson: '/uploadFile',
            fileManagerJson: '/uploadFile',
            height: '300px',
            allowMediaUpload: 'false',
            allowFileUpload: 'false',
            //themeType : 'common'
            items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                'superscript', 'selectall', '/',
                'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'table', 'hr', 'emoticons', '|', 'about'
            ],
            //langType : 'zh_CN'
        });

        window.editor = K.create('.editor_cjw', {
            uploadJson: '/uploadFile',
            fileManagerJson: '/uploadFile',
            height: '300px',
            allowMediaUpload: 'false',
            allowFileUpload: 'false',
            //themeType : 'common'
            items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                'superscript', 'selectall', '/',
                'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'table', 'hr', 'emoticons', '|', 'about'
            ],
            //langType : 'zh_CN'
        });
    });
    </script>
    <script>
    var editor = new Quill('#editor', {
        modules: { toolbar: '#toolbar' },
        theme: 'snow'
    });
    </script>
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                showKeywords: false,
                showContent: false,
                modifyHtml: false,
                allWords: ["接地电阻表",
                    "钳形接地电阻表",
                    "接地电阻测试仪",
                    "接地电阻在线检测仪",
                    "接地电阻在线测试仪",
                    "接地电阻土壤电阻率测试仪",
                    "双钳接地电阻测试仪",
                    "大地网接地电阻测试仪",
                    "非接触型相序表",
                    "台区相线识别仪",
                    "无线高压核相仪",
                    "智能型等电位测试仪",
                    "双钳相位伏安表",
                    "三相伏安相位表",
                    "电能质量分析仪",
                    "钳形交直流漏电表",
                    "大口径钳形泄漏电流表",
                    "油田抽油机多用表",
                    "无线泄漏电流在线测试仪",
                    "柔性线圈电流测试仪",
                    "柔性电流钳表",
                    "高压钳形电流表",
                    "换相开关式三相不平衡治理装置",
                    "三相负载自动调节装置",
                    "远程断电漏电报警监测仪",
                    "无线高压开口式钳形电流表",
                    "防雷元件测试仪",
                    "防雷专用标准电阻",
                    "高压绝缘电阻测试仪",
                    "高压兆欧表",
                    "开合式漏电流传感器",
                    "钳形泄漏电流传感器",
                    "交直流漏流传感器",
                    "微安级开合式高精度漏电流传感器",
                    "剩余电流传感器",
                    "柔性线圈传感器",
                    "罗氏线圈传感器",
                    "智能防雷元件测试仪",
                    '交流钳形漏电流表',
                    "钳形接地电阻仪",
                    "大口径分离式漏电流传感器",
                    "土壤电阻率测试仪",
                    "钳形交直流漏电流表",
                    "高精度钳形漏电流传感器",
                    "远程断电漏电报警监测仪",
                ],
                loadingBaidu: false,
                haveResult: false,
                page: 0,
                requestUrl: '',
                inputVisible: false,
                inputValue: '',
                types: ['文本', '数字', '地址', '选择', '多选', '单选', '时间', '日期', '时间段'],
                value6: '',
                word: "",
                list: [{
                    name: '',
                    type: 2,
                    selections: ['选项1', '选项2']
                }],
                form: {
                    title: '${info.title!""}',
                    seoTitle: '${info.seoTitle!""}',
                    seoDescription: '${info.seoDescription!""}',
                    seoKeywords: '${info.seoKeywords!""}',
                    id: '${info.id!""}',
                    categoryId: '${info.categoryId!""}',
                    updateTime: '${info.updateTime!""}',
                    description: `${info.description!""}`,
                },
                queryId: '${info.id!""}',
                tableData: [],
                originWords: '${info.seoKeywords!""}',
                words: '${words!""}',
                queryResults: [],
                count1: 0,
                count2: 0,
                count3: 0,
                count10: 0
            }
        },
        mounted: function() {
            this.form.seoKeywords = this.form.seoKeywords.replace('、', ',')
            this.form.seoKeywords = this.form.seoKeywords.replace('、', ',')
        },
        methods: {
            clearBlank() {
                this.form.seoDescription = this.form.seoDescription.replace(/\s*/g, "");
                this.showContent = false
            },
            onSave() {
                alert('ss')
            },
            checkAll() {
                var self = this
                this.queryResults = []
                for (var idx = 0; idx < this.allWords.length; idx++) {
                    var word = this.allWords[idx]
                    var url = '/yitai/search/?text=' + word
                    axios({
                            url: url,
                            method: 'post',
                            data: {},
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            var data = response.data
                            if (data.status == 200) {
                                var info = {
                                    key: data.info.word,
                                    rank: data.info.page,
                                    url: data.info.url
                                }
                                self.queryResults.push(info)
                            } else {
                                self.queryResults.push({
                                    key: word,
                                    rank: '10+',
                                    url: ''
                                })
                            }
                        })
                        .catch(function(error) {
                            self.loadingBaidu = false
                            msg("请求失败");
                            console.log(error);
                        });
                }
            },
            onClickWord(word) {
                this.word = word
            },
            getBaidu() {
                var self = this
                self.haveResult = false
                self.loadingBaidu = true
                // alert('getBaidu')
                var url = '/yitai/search/?text=' + this.word
                axios({
                        url: url,
                        method: 'post',
                        data: {
                            a: 1
                        },
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        self.loadingBaidu = false
                        self.haveResult = false
                        console.log(response.data)
                        var data = response.data
                        if (data.status == 200) {
                            self.haveResult = true
                            self.page = data.info.page
                            self.requestUrl = data.info.url
                        } else {

                        }
                    })
                    .catch(function(error) {
                        self.loadingBaidu = false
                        msg("请求失败");
                        console.log(error);
                    });
            },
            onCheckNews() {
                var url = 'http://www.etcr.com.cn/news/info?id=' + this.form.id
                window.open(url)
            },
            onCheck() {
                var url = 'http://www.etcr.com.cn/product/info?id=' + this.form.id
                window.open(url)
            },
            onsplit() {
                // var url = 'http://api.pullword.com/get.php?source=' + this.originWords + '&param1=0&param2=1'
                var url = 'http://api.pullword.com/get.php?source=防爆型钳形接地电阻测试仪&param1=0&param2=1'
                axios({
                        url: url,
                        method: 'post',
                        data: {},
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        console.log(response.data)
                    })
                    .catch(function(error) {
                        endLoading();
                        msg("请求失败");
                        console.log(error);
                    });
            },
            query() {
                window.location.href = "/yitai/info/?id=" + this.queryId
            },
            onSubmit() {
                var param = {
                    seoTitle: this.form.seoTitle,
                    seoDescription: this.form.seoDescription,
                    seoKeywords: this.form.seoKeywords,
                    id: this.form.id,
                }
                if (this.modifyHtml) {
                    param['description'] = this.form.description
                }
                axiosRequest(param, '/yitai/submit', "")
                return false
            }
        },
        filters: {
            fmt(date) {
                return date
            }
        }
    })
    </script>
    <script>
    console.log('${items!}')
    // vue.tableData = ${items!};
    </script>
</body>

</html>